<!--
 * @Author: your name
 * @Date: 2020-12-19 16:55:36
 * @LastEditTime: 2020-12-19 17:27:13
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicjs\event\maopao.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            background: #34495e;
            width: 300px;
            padding: 30px;
        }
        #app h2{
            background-color: #f1c40f;
            margin-right: -100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>houdunren.com</h2>
    </div>

    <script>
        // const app = document.querySelector('#app');
        // const h2 = document.querySelector('h2');
        //冒泡行为
        //标签元素是嵌套的,在一个元素上触发的事件,同时也会向上级的父亲级别元素出发
        //一直找到html标签元素为止

        //大部分的事件对象都是会冒泡的,但是向focus不会
        // app.addEventListener('click',(event) => {
        //     console.log(`event.currentTarget-${event.currentTarget.nodeName}`);
        //     console.log(`event.target-${event.target.nodeName}`);
        //     console.log('app event');
        // });


        //阻止冒泡的原理
        /*
        冒泡过程中的任何事件的处理程序中都是可以执行 event.stopPropagation()方法阻止继续进行冒泡触底
        event.stopPropagation() 用于阻止冒泡
        如果同一个类型的事件绑定多个事件处理程序的话,使用event..stopPropagation()只是阻止当前的事件处理程序
        event.stopImmediatePropagation()阻止事件冒泡，并且阻止其他的事件处理程序被调用
        */
        // h2.addEventListener('click',(event) => {
        //     //阻止冒泡  
        //     // event.stopPropagation();
        //     // event.stopImmediatePropagation();
        //     console.log(`event.currentTarget-${event.currentTarget.nodeName}`);
        //     console.log(`event.taget-${event.target.nodeName}`);
        //     console.log(`h2 event`);
        // });
        
        // h2.addEventListener('click',(event) => {
        //     console.log('h2 的第二个事件处理程序');
        // });


        //事件捕获
        /*
        事件的执行顺序为 捕获 > 事件目标 > 冒泡阶段执行
        在向下传递到目标对象的过程就是事件捕获,事件捕获在实际的使用中并不多
            通过设置第三个参数为true或者{caputer:true} 在捕获阶段就执行事件处理程序
        */
        // const app = document.querySelector(`#app`);
        // const h2 = document.querySelector('h2');
        // app.addEventListener('click',function(){
        //   console.log('app event');  
        // },{
        //     capture:true
        // });

        // h2.addEventListener('click',(event) => {
        //     event.stopPropagation();
        //     console.log(`h2 event`);
        // });

        
    </script>
</body>
</html>
